<template>
    <div>
        <el-row :gutter="20">
            <el-col :span="8">
                <el-card shadow="hover" class="mgb20" style="height:252px;">
<!--                    展示用户信息-->
                    <div class="user-info">
                        <img src="../../assets/img/user.png" class="user-avator" alt />
                        <div class="user-info-cont">
                            <div class="user-info-name">{{name}}</div>
                            <div>{{role}}</div>
                        </div>

                    </div>
                    <el-button size="small" icon="el-icon-lx-edit" @click="editAccount()"> 修改信息</el-button>

                </el-card>
<!--                销量排名前四的商品-->
                <el-card shadow="hover" style="height:252px;">
                    <div slot="header" class="clearfix">
                        <span>畅销产品</span>
                    </div>
                    {{firstProduct}}
                    <el-progress :percentage="percentage_1" :format="percentage_Product()" color="#42b983"></el-progress>
                    {{secondProduct}}
                    <el-progress :percentage="percentage_2" :format="percentage_Product()" color="#f1e05a"></el-progress>{{thirdProduct}}
                    <el-progress :percentage="percentage_3" :format="percentage_Product()"></el-progress>{{forthProduct}}
                    <el-progress :percentage="percentage_4" :format="percentage_Product()" color="#f56c6c"></el-progress>
                </el-card>
            </el-col>

            <el-col :span="16">
                <el-row :gutter="20" class="mgb20">
                    <el-col :span="8">
                        <el-card shadow="hover" :body-style="{padding: '0px'}">
                            <div class="grid-content grid-con-1">
                                <i class="el-icon-lx-people grid-con-icon"></i>
                                <div class="grid-cont-right">
                                    <div class="grid-num" >{{todayOrder}}</div>
                                    <div>今日下单量</div>
                                </div>
                            </div>
                        </el-card>
                    </el-col>
                    <el-col :span="8">
                        <el-card shadow="hover" :body-style="{padding: '0px'}">
                            <div class="grid-content grid-con-2">
                                <i class="el-icon-lx-notice grid-con-icon"></i>
                                <div class="grid-cont-right">
                                    <div class="grid-num">{{toFinishOrder}}</div>
                                    <div>未发货订单量</div>
                                </div>
                            </div>
                        </el-card>
                    </el-col>
                    <el-col :span="8">
                        <el-card shadow="hover" :body-style="{padding: '0px'}">
                            <div class="grid-content grid-con-3">
                                <i class="el-icon-lx-goods grid-con-icon"></i>
                                <div class="grid-cont-right">
                                    <div class="grid-num">{{supplyShort}}</div>
                                    <div>需要补充库存的产品数量</div>
                                </div>
                            </div>
                        </el-card>
                    </el-col>
                </el-row>
                <el-card shadow="hover" style="height:403px;">
                    <div slot="header" class="clearfix">
                        <span>备忘录</span>
                        <el-input
                                type="textarea"
                                :rows="2"
                                placeholder="请输入内容"
                                v-model="textarea">
                        </el-input>
                        <el-button style="float: right; padding: 3px 0" type="text"  class="el-icon-plus" @click= "newList()">增加</el-button>
                    </div>
                    <el-table :show-header="false" :data="todoList" style="width:100%;">
                        <el-table-column width="40">
                            <template slot-scope="scope">
                                <el-checkbox v-model="scope.row.status" ></el-checkbox>
                            </template>
                        </el-table-column>
                        <el-table-column>
                            <template slot-scope="scope">
                                <div
                                    class="todo-item"
                                    :class="{'todo-item-del': scope.row.status}"
                                >{{scope.row.title}}</div>
                            </template>
                        </el-table-column>
                        <el-table-column width="60">
                            <template slot-scope="scope">
                                <el-button type="text" icon="el-icon-delete" class="red" @click="handleDelete(scope.$index, scope.row)" >删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-card>
            </el-col>
        </el-row>
<!--        <el-row :gutter="20">-->
<!--            <el-col :span="12">-->
<!--                <el-card shadow="hover">-->
<!--                    <schart ref="bar" class="schart" canvasId="bar" :options="options"></schart>-->
<!--                </el-card>-->
<!--            </el-col>-->
<!--            <el-col :span="12">-->
<!--                <el-card shadow="hover">-->
<!--                    <schart ref="line" class="schart" canvasId="line" :options="options2"></schart>-->
<!--                </el-card>-->
<!--            </el-col>-->
<!--        </el-row>-->
    </div>
</template>

<script>
import Schart from 'vue-schart';
export default {
    name: 'dashboard',
    data() {
        return {
            name: localStorage.getItem('ms_username'),
            firstProduct:"pro",
            secondProduct:"pro",
            thirdProduct:"pro",
            forthProduct:"pro",
            percentage_1:0,
            percentage_2:0,
            percentage_3:0,
            percentage_4:0,

            todayOrder:"",
            toFinishOrder:"",
            supplyShort:"",
            textarea: '',
            responseResult: [],
            multipleSelection: [],
            todoList: [
                // {
                //     title: 'aaa',
                //     status: false
                // },
            ],
            // data: [
            //
            //     {
            //         name: '2018/09/10',
            //         value: 1065
            //     }
            // ],
            // options: {
            //     type: 'bar',
            //     title: {
            //         text: '最近一周各品类销售图'
            //     },
            //     xRorate: 25,
            //     labels: ['周一', '周二', '周三', '周四', '周五'],
            //     datasets: [
            //         {
            //             label: '家电',
            //             data: [234, 278, 270, 190, 230]
            //         },
            //         {
            //             label: '百货',
            //             data: [164, 178, 190, 135, 160]
            //         },
            //         {
            //             label: '食品',
            //             data: [144, 198, 150, 235, 120]
            //         }
            //     ]
            // },
            // options2: {
            //     type: 'line',
            //     title: {
            //         text: '最近几个月各品类销售趋势图'
            //     },
            //     labels: ['6月', '7月', '8月', '9月', '10月'],
            //     datasets: [
            //         {
            //             label: '家电',
            //             data: [234, 278, 270, 190, 230]
            //         },
            //         {
            //             label: '百货',
            //             data: [164, 178, 150, 135, 160]
            //         },
            //         {
            //             label: '食品',
            //             data: [74, 118, 200, 235, 90]
            //         }
            //     ]
            // }
        };
    },
    mounted() {
        this.todayOrderNumber();
        this.toFinish();
        this.supplyShortNumber();
        this.toDo();
    }
    ,
    components: {
        Schart,

    },
    computed: {
        role() {
            return this.name === 'admin' ? '超级管理员' : '普通用户';
        },
    },



    methods: {

        editAccount(){
            this.$router.push({ path:'/editAccount'});
        },
        newList(){
            // console.log("aaaaaaaaa"+this.textarea);
            if(this.textarea!=""){
                this.$axios
                    .post('/dashboard', {
                        params: ".newList.",
                        txt:this.textarea
                    })
                    .then(successResponse => {
                        this.todoList.push({
                            title:this.textarea,
                            status:false
                        });
                    })
            }
        },
        supplyShortNumber(){
            this.$axios
                .post('/dashboard', {
                    params: ".supplyShort."
                })
                .then(successResponse => {
                    this.supplyShort = successResponse.data;
                })
        },
        todayOrderNumber(){
            this.$axios
                .post('/dashboard', {
                    params: ".todayOrderNumber."
                })
                .then(successResponse => {
                   this.todayOrder = successResponse.data;
                })
        },
        toFinish(){
            this.$axios
                .post('/dashboard', {
                    params: ".toFinishOrder."
                })
                .then(successResponse => {
                    this.toFinishOrder = successResponse.data;
                })

        },
        percentage_Product() {
            this.$axios
                .post('/dashboard', {
                    // quest: "percentage_Product",
                    params: ".percentage_Product."
        })
                .then(successResponse => {
                    var str = successResponse.data;
                    var arr=new Array();
                    arr=str.split(',');
                    this.firstProduct=arr[0];
                    this.percentage_1=arr[1];
                    this.secondProduct=arr[2];
                    this.percentage_2=arr[3];
                    this.thirdProduct=arr[4];
                    this.percentage_3=arr[5];
                    this.forthProduct=arr[6];
                    this.percentage_4=arr[7];

                })
        },
        toDo(){
            this.$axios
                .post('/dashboard', {
                    params: ".todo."
                })
                .then(successResponse => {
                    const str = successResponse.data;
                    let arr = new Array();
                    arr=str.split(',');
                    for(let i=0; i<arr.length; i++)
                    {
                        let todoObj={
                            title:arr[i],
                            status:false
                        };
                        this.todoList.push(todoObj);

                    }

                })
        },
        // 删除操作
        handleDelete(index, row) {
            // 二次确认删除
            this.$confirm('确定要删除吗？', '提示', {
                type: 'warning'
            })

                .then(() => {
                    this.$axios
                        .post('/dashboard', {
                            params: ".deltodo."+row.title+"."
                        })
                        .then(successResponse => {
                            this.$message.success('删除成功');
                            this.todoList.splice(index, 1);
                        })

                })
                .catch(() => {});

        },
        // handleListener() {
        //     bus.$on('collapse', this.handleBus);
        //     // 调用renderChart方法对图表进行重新渲染
        //     window.addEventListener('resize', this.renderChart);
        // },
        // handleBus(msg) {
        //     setTimeout(() => {
        //         this.renderChart();
        //     }, 200);
        // },
        // renderChart() {
        //     this.$refs.bar.renderChart();
        //     this.$refs.line.renderChart();
        // }
    }
};
</script>


<style scoped>
.el-row {
    margin-bottom: 20px;
}

.grid-content {
    display: flex;
    align-items: center;
    height: 100px;
}

.grid-cont-right {
    flex: 1;
    text-align: center;
    font-size: 14px;
    color: #999;
}

.grid-num {
    font-size: 30px;
    font-weight: bold;
}

.grid-con-icon {
    font-size: 50px;
    width: 100px;
    height: 100px;
    text-align: center;
    line-height: 100px;
    color: #fff;
}

.grid-con-1 .grid-con-icon {
    background: rgb(45, 140, 240);
}

.grid-con-1 .grid-num {
    color: rgb(45, 140, 240);
}

.grid-con-2 .grid-con-icon {
    background: rgb(100, 213, 114);
}

.grid-con-2 .grid-num {
    color: rgb(45, 140, 240);
}

.grid-con-3 .grid-con-icon {
    background: rgb(242, 94, 67);
}

.grid-con-3 .grid-num {
    color: rgb(242, 94, 67);
}

.user-info {
    display: flex;
    align-items: center;
    padding-bottom: 20px;
    border-bottom: 2px solid #ccc;
    margin-bottom: 20px;
}

.user-avator {
    width: 120px;
    height: 120px;
    border-radius: 50%;
}

.user-info-cont {
    padding-left: 50px;
    flex: 1;
    font-size: 14px;
    color: #999;
}

.user-info-cont div:first-child {
    font-size: 30px;
    color: #222;
}

.user-info-list {
    font-size: 14px;
    color: #999;
    line-height: 25px;
}

.user-info-list span {
    margin-left: 70px;
}

.mgb20 {
    margin-bottom: 20px;
}

.todo-item {
    font-size: 14px;
}

.todo-item-del {
    text-decoration: line-through;
    color: #999;
}

.schart {
    width: 100%;
    height: 300px;
}
</style>
